<template>
  <van-form class="bind-mobile-content"
            @submit="onSubmit">
    <van-cell-group>
      <van-field v-model="phone"
                 name="phone"
                 placeholder="请输入手机号"
                 :rules="phoneRules"
                 clearable />
      <van-field v-model="captcha"
                 name="captcha"
                 placeholder="请输入验证码"
                 :rules="[{ required: true, message: '请输入验证码' }]"
                 clearable>
        <van-button slot="button"
                    size="small"
                    type="default"
                    class="send-sms"
                    native-type="button"
                    :disabled="this.waitTime < 60"
                    @click="sendCode">{{smsBtnText}}</van-button>
      </van-field>
    </van-cell-group>

    <van-button type="default"
                class="submit-btn"
                native-type="submit"
                round
                block
                :disabled="captcha === ''">绑定</van-button>
  </van-form>
</template>

<script>
import { phoneRules, checkFn } from '@/utils/formRules'
import { bindMobileStep1, bindMobileStep2 } from '@/api/memberInfo'
import { mapMutations } from 'vuex'
export default {
  name: 'BindMobile',
  data() {
    return {
      waitTime: 60,
      phoneRules: Object.freeze(phoneRules),
      captcha: '',
      phone: ''
    }
  },
  computed: {
    smsBtnText() {
      return this.waitTime < 60 ? this.waitTime : '获取验证码'
    }
  },
  methods: {
    ...mapMutations({
      memberEdit: 'memberEdit'
    }),
    /**
     * 提交绑定手机
     */
    onSubmit() {
      bindMobileStep2(this.captcha)
        .then(res => {
          // 更新vuex的值
          this.memberEdit({ member_mobilebind: 1, member_mobile: this.phone })
          this.$toast({
            type: 'success',
            message: res.message || '验证成功',
            onClose: () => {
              this.$router.go(-1)
            }
          })
        })
        .catch(res => {
          this.$toast({
            type: 'fail',
            message: res.message || '验证失败'
          })
        })
    },
    /**
     * 发送验证码
     */
    sendCode() {
      // 验证手机号
      let { state, error } = checkFn(phoneRules, this.phone)
      if (!state) {
        bindMobileStep1(this.phone)
          .then(res => {
            this.$toast({
              type: 'success',
              message: '发送成功'
            })
            let interval = setInterval(() => {
              if (this.waitTime === 0) {
                clearInterval(interval)
                this.waitTime = 60
              } else this.waitTime--
            }, 1000)
          })
          .catch(res => {
            this.$toast({
              type: 'fail',
              message: res.message
            })
          })
      } else {
        this.$toast({
          type: 'fail',
          message: error
        })
      }
    }
  }
}
</script>

<style lang="scss">
.bind-mobile-content {
  font-size: 18px;
  padding: 0 20px;
  .send-sms {
    border-color: transparent transparent transparent #e5e5e5;
    color: #999999;
    font-size: 16px;
    height: 100%;
  }
}
</style>
